<template>
  <div class="tableRow" ref="tableRow">
    <el-table
      :data="data"
      class="dataTable"
      ref="dataTable"
      size="small"
      v-horizontal-scroll="{bottom:42}"
    >
      <el-table-column label="序号" type="index" align="center" fixed>
      </el-table-column>
      <el-table-column label="URI" align="center" prop="URI" :show-overflow-tooltip="true" fixed min-width="200">
        <template v-slot="{ row }">
          <el-button type="text" @click="url(row)" size="small">{{ row.URI }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="请求次数" align="center" prop="RequestCount"/>
      <el-table-column label="请求时间（和）" align="center" prop="RequestTimeMillis" min-width="150"/>
      <el-table-column label="请求最慢（单次）" align="center" prop="RequestTimeMillisMax" min-width="150"/>
      <el-table-column label="执行中" align="center" prop="RunningCount"/>
      <el-table-column label="最大并发" align="center" prop="ConcurrentMax"/>
      <el-table-column label="Jdbc执行数" align="center" prop="JdbcExecuteCount"/>
      <el-table-column label="Jdbc出错数" align="center" prop="JdbcExecuteErrorCount"/>
      <el-table-column label="Jdbc时间" align="center" prop="JdbcExecuteTimeMillis"/>
      <el-table-column label="事务提交数" align="center" prop="JdbcCommitCount"/>
      <el-table-column label="事务回滚数" align="center" prop="JdbcRollbackCount"/>
      <el-table-column label="读取行数" align="center" prop="JdbcFetchRowCount"/>
      <el-table-column label="更新行数" align="center" prop="JdbcUpdateCount"/>
      <el-table-column label="区间分布" align="center" prop="Histogram" :formatter="formatter" min-width="200"
                       :show-overflow-tooltip="true"/>
    </el-table>
  </div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {webUri} from "@/api/druidMonitor";
import erd from "element-resize-detector";

@Component({name: 'Url'})
export default class Url extends Vue {
  // 表格数据
  data: Array<any> = [];

  getData() {
    webUri().then((response: any) => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  formatter(row, column, cellValue) {
    return `[${cellValue.join(',')}]`;
  }

  mounted() {
    this.onresize();
    this.getData();
  }

  url(row) {
    this.$router.push(`/monitor/url-detail?url=${row.URI}`)
  }

  $refs!: {
    dataTable: HTMLFormElement,
    tableRow: HTMLDivElement
  };

  onresize() {
    const container = this.$refs.dataTable.$el;
    erd().listenTo(container, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow) {
          this.$refs.tableRow.style.height = (this.$refs.dataTable && this.$refs.dataTable.$el.clientHeight) + 'px';
        }
      })
    })
  }
}
</script>

<style scoped lang="scss">
.tableRow {
  position: relative;

  .dataTable {
    position: absolute;
  }
}
</style>

